<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 输入框 双向绑定 -->
			<input v-model="message" placeholder="edit me" />
			<p>Message is: {{message}}</p>

			<textarea v-model="message2" placeholder="add multipe lines"></textarea>
			<p style="white-space: pre-line;">{{message2}}</p>

			<!-- 复选框 -->
			<div style="margin-top: 20px;">
				<input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
				<label for="jack">Jack</label>
				<input type="checkbox" id="john" value="John" v-model="checkedNames" />
				<label for="john">John</label>
				<input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
				<label for="mike">Mike</label>
				<br>
				<span>Checked names: {{checkedNames}}</span>
			</div>

			<!-- 单选框 -->
			<div style="margin-top: 20px;">
				<input type="radio" id="male" value="Male" v-model="sex" />
				<label for="male">Male</label>
				<input type="radio" id="feMale" value="FeMale" v-model="sex" />
				<label for="feMale">FeMale</label>
				<br>
				<span>sex: {{sex}}</span>
			</div>
			
			<button type="button" v-on:click="submit">提交</button>
			<button type="button" @click="submit1">提交</button>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					message: "22",
					message2: "",
					checkedNames: [],
					sex: "FeMale"
				},
				methods: {
					submit: function() {
						console.log(this.message, this.sex);
					},
					submit1: function() {
						console.log(this.message, this.sex);
					}
				}
				
			});
		</script>
	</body>
</html>
